<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="省市区">
      <el-cascader :options="options" v-model="selectedOptions" @change="onSubmit">
      </el-cascader>
    </el-form-item>
    <el-form-item label="场所名">
      <el-input v-model="formData.name" placeholder="请输入场所名关键字"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="编号" width="70"/>
    <el-table-column fixed prop="name" label="场所名" width="120"/>
    <el-table-column prop="img" label="门面图" width="200">
      <template #default="scope">
        <el-image :src="scope.row.img" style="width: 50px;height: 50px"/>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="具体地址" width="400"/>
    <el-table-column prop="brief" label="备注" width="400"/>
    <el-table-column prop="seq" label="排序" width="70"/>
    <el-table-column fixed="right" label="操作" width="230">
      <template #default="scope">
        <el-button type="success" size="small" @click="handleClick(scope.row)">场所码</el-button>
        <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                 style="margin-top: 10px" @current-change="pageChange"/>
  <el-drawer
      v-model="drawer"
      title="场所码"
      direction="ltr">
    <el-card class="card" :body-style="{ padding: '0px' }">
      <span class="title">{{ ma.title }}</span>
      <figure class="qrcode">
        <vue-qrcode :value="ma.url" tag="img"></vue-qrcode>
        <img class="qrcode__image" :src="ma.img" alt=""/>
      </figure>

      <div style="padding: 14px">
        <div class="bottom">
          <time class="time">打开【微信/支付宝】扫一扫</time>
        </div>
      </div>
    </el-card>
  </el-drawer>
</template>
<script setup lang="ts">
import {onMounted, ref, reactive} from 'vue'
import {venueApi} from "@/api/index"
import {useRouter, useRoute} from 'vue-router'
import {regionData} from 'element-china-area-data'
import {ElMessageBox, ElMessage} from "element-plus"
import VueQrcode from "@chenfengyuan/vue-qrcode"

const router = useRouter() //页面跳转
const route = useRoute() //获取当前页面的参数
const drawer = ref(false)
const ma = reactive({
  title: '',
  img: '',
  url: ''
})
const options = ref(regionData)
const selectedOptions = ref([])
const tableData = ref([])
const formData = reactive({
  name: ""
})
const pageInfo = reactive({
  total: 0,
  pageSize: 5,
  pageNum: 1
})
onMounted(() => {
  onSubmit()
})
const handleClick = (row: any) => {
  ma.title = row.name
  ma.img = row.img
  ma.url = 'http://localhost:8084/' + row.id
  drawer.value = true
}
const onSubmit = () => {
  let params: any = {}
  if (formData.name.trim() != "") {
    params.name = formData.name
  }
  if (selectedOptions.value.length == 3) {
    params.country = selectedOptions.value[2]
  }
  params.pageSize = pageInfo.pageSize   //一页多少条的参数
  params.pageNum = pageInfo.pageNum    //你要查询第几页
  venueApi.select.call(params).then((res: any) => {
    pageInfo.total = res.total
    tableData.value = res.list
  })
}

const handleDel = (row: any) => {
  ElMessageBox.confirm(
      '确定要删除吗？',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  ).then(() => {
    venueApi.delete.call(row.id).then((res: any) => {
      if (res === 1) {
        onSubmit()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
  }).catch(() => {
  })
}
const edit = (row: any) => {
  router.push({name: 'venue-edit', query: {id: row.id}})
}
const pageChange = (num: number) => {
  pageInfo.pageNum = num
  onSubmit()
}
</script>
<style scoped>
.card {
  background-color: #38f;
  text-align: center;
  height: 400px;
  width: 300px;
  margin-left: 50px;
}

.qrcode {
  display: inline-block;
  font-size: 0;
  margin-bottom: 0;
  position: relative;
}

.qrcode__image {
  background-color: #fff;
  border: 0.25rem solid #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
  height: 15%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
}

.title {
  padding: 14px;
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  margin-top: 40px;
}

.bottom {
  font-size: 12px;
  margin-top: 13px;
  color: #fff;
}
</style>
